getStudent()

// 获取dom元素
const tbody = document.querySelector('tbody')
const province = document.querySelector('select[name=province]')
const city = document.querySelector('select[name=city]')
const county = document.querySelector('select[name=county]')
const form = document.querySelector('.add-form')
const modal = new bootstrap.Modal('#addModal')//获取模态框dom元素
const showmodalBtn = document.querySelector('.show-modal-btn')
const btn = document.querySelector('.btn-ss')
// 数据渲染

async function getStudent() {
    const res = await axios({ url: '/student/list' })
    // console.log(res);

    const { data } = res.data
    console.log(data);
    const html = data.map(v => {
        const { age, city, county, group, id, name, phone, province, salary, sex, truesalary } = v
        return `
 <tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-x btn-sm"  data-id='${id}'>修改</button>
          <button type="button" class="btn btn-danger btn-s  btn-sm"   data-id='${id}'>删除</button>
        </td>
      </tr>
        `
    }).join('')
    tbody.innerHTML = html
}

// 初始化省市区
async function getSelectData(url, params, text, target) {
    const res = await axios({ url, params })
    const htmls = res.data.reduce((a, b) => {
        return a + `
        <option value='${b}'>${b}</option>
        `
    }, `<option value=''>${text}</option>`)
    target.innerHTML = htmls
}
async function initSlelect() {
    getSelectData('/geo/province', {}, '省份', province)
}

province.addEventListener('change', async function (e) {
    getSelectData('/geo/city', { pname: province.value }, '城市', city)
    county.innerHTML = county.firstChild.outerHTML
})
city.addEventListener('change', async function (e) {
    getSelectData('/geo/county', { pname: province.value, cname: city.value }, '地区', county)
})
// 添加学员
showmodalBtn.addEventListener('click', function (e) {
    modal.show()
    document.querySelector('.modal-title').innerText = '添加牛马学员'
})

btn.onclick = async function (e) {
    e.preventDefault()

    const data = serialize(form, { hash: true, empty: true })
    delete data.id
    const res = await axios({

        url: '/student/add',
        method: 'post',
        data
    })
    console.log(res);
    modal.hide()
    getStudent()
}

// 编辑和删除
tbody.addEventListener('click', async function (e) {
    e.preventDefault()
    let id
    if (e.target.classList.contains('btn-x')) {
        modal.show()
        document.querySelector('.modal-title').innerText = '修改牛马学员'
        id = e.target.dataset.id
        const res = await axios({ url: "/student/one", params: { id } })
        console.log(res);
        for (const key in res.data.data) {
            const fe = document.querySelector(`[name=${key}]`)
            if (fe && key !== 'sex') {
                fe.value = res.data.data[key]
            }
        }
        initSlelect()
        document.querySelector(`[name=sex][value=${res.data.data.sex}]`).checked = true
    } else if (e.target.classList.contains('btn-s')) {
        id = e.target.dataset.id
        if (confirm('您确定删除吗？')) {
            res = await axios({ url: `/student/delete`, method: 'delete', params: { id } })
            getStudent()
        }
    }
})
